﻿<div class="row" id="{{'Tab'+dataItem.Id}}" ng-controller="dateValidator">
    <div class="col-sm-4" ng-controller="orderController" ng-init="init(dataItem.Id)">
        <div name="ordersForm" class="form-horizontal well" role="form" novalidate>
            <div class="form-group">
                <label class="col-sm-5 control-label" class="control-label">Voyage Order Date: </label>
                <div class="col-sm-7">
                    <span class="k-widget k-datetimepicker k-header k-input">
                        <span class="k-picker-wrap k-state-default">
                            <input kendo-date-time-picker type="text" k-ng-model="dataItem.VoyageOrderDate" class="k-input" placeholder="Enter date and time" name="{{'InputVOD'+dataItem.Id}}" 
                                ng-blur="dataItem.VoyageOrderDate=checkOldMatch(str.VOD, dataItem.VoyageOrderDate );
                                reset('InputVOD'+dataItem.Id, dataItem.VoyageOrderDate, dataItem.Id)" tabindex="100" id="{{'InputVOD'+dataItem.Id}}"
                                ng-model="str.VOD" ng-init="str.VOD=getDateTimeString(dataItem.VoyageOrderDate)" k-parse-formats="formatsDateTime" k-format="formatDateTime" />
                            <span unselectable="on" class="k-select"><span unselectable="on" class="k-icon k-i-calendar" role="button">select</span><span unselectable="on" class="k-icon k-i-clock" role="button">select</span><span unselectable="on" class="k-icon k-i-close" role="button" ng-click="dataItem.VoyageOrderDate=clearDate();str.VOD=clearDate();reset('InputVOD'+dataItem.Id, dataItem.VoyageOrderDate, dataItem.Id)">select</span></span>
                        </span>
                    </span>
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-5 control-label">Loading Order Date: </label>
                <div class="col-sm-7">
                    <span class="k-widget k-datetimepicker k-header k-input">
                        <span class="k-picker-wrap k-state-default">
                            <input kendo-date-time-picker type="text" k-ng-model="dataItem.LoadingOrderDate" class="k-input" placeholder="Enter date and time" name="{{'InputLOD'+dataItem.Id}}" 
                                ng-model="str.LOD" ng-init="str.LOD=getDateTimeString(dataItem.LoadingOrderDate)" tabindex="100"
                                ng-blur="dataItem.LoadingOrderDate=checkOldMatch(str.LOD, dataItem.LoadingOrderDate);
                                reset('InputLOD'+dataItem.Id, dataItem.LoadingOrderDate, dataItem.Id)" k-parse-formats="formatsDateTime" k-format="formatDateTime" />
                            <span unselectable="on" class="k-select"><span unselectable="on" class="k-icon k-i-calendar" role="button">select</span><span unselectable="on" class="k-icon k-i-clock" role="button">select</span><span unselectable="on" class="k-icon k-i-close" role="button" ng-click="dataItem.LoadingOrderDate=clearDate();str.LOD=clearDate();reset('InputLOD'+dataItem.Id, dataItem.LoadingOrderDate, dataItem.Id)">select</span></span>
                        </span>
                    </span>
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-5 control-label">Discharge Order Date: </label>
                <div class="col-sm-7">
                    <span class="k-widget k-datetimepicker k-header k-input">
                        <span class="k-picker-wrap k-state-default">
                            <input kendo-date-time-picker type="text" k-ng-model="dataItem.DischargeOrderDate" class="k-input" placeholder="Enter date and time" name="{{'InputDO'+dataItem.Id}}" 
                                ng-blur="dataItem.DischargeOrderDate=checkOldMatch(str.DO, dataItem.DischargeOrderDate);
                                reset('InputDO'+dataItem.Id, dataItem.DischargeOrderDate, dataItem.Id)" tabindex="100"
                                ng-model="str.DO" ng-init="str.DO=getDateTimeString(dataItem.DischargeOrderDate)" k-parse-formats="formatsDateTime" k-format="formatDateTime" />
                            <span unselectable="on" class="k-select"><span unselectable="on" class="k-icon k-i-calendar" role="button">select</span><span unselectable="on" class="k-icon k-i-clock" role="button">select</span><span unselectable="on" class="k-icon k-i-close" role="button" ng-click="dataItem.DischargeOrderDate=clearDate();str.DO=clearDate();reset('InputDO'+dataItem.Id, dataItem.DischargeOrderDate, dataItem.Id)">select</span></span>
                        </span>
                    </span>
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-5 control-label">Bill of Laden Date: </label>
                <div class="col-sm-7">
                    <span class="k-widget k-datetimepicker k-header k-input">
                        <span class="k-picker-wrap k-state-default">
                            <input kendo-date-time-picker type="text" k-ng-model="dataItem.BillOfLadenDate" class="k-input" placeholder="Enter date and time" name="{{'InputBOD'+dataItem.Id}}" 
                                ng-model="str.BOD" ng-init="str.BOD=getDateTimeString(dataItem.BillOfLadenDate)" k-parse-formats="formatsDateTime" k-format="formatDateTime" tabindex="100"
                                ng-blur="dataItem.BillOfLadenDate=checkOldMatch(str.BOD, dataItem.BillOfLadenDate); reset('InputBOD'+dataItem.Id, dataItem.BillOfLadenDate, dataItem.Id)" />
                            <span unselectable="on" class="k-select"><span unselectable="on" class="k-icon k-i-calendar" role="button">select</span><span unselectable="on" class="k-icon k-i-clock" role="button">select</span><span unselectable="on" class="k-icon k-i-close" role="button" ng-click="dataItem.BillOfLadenDate=clearDate();str.BOD=clearDate();reset('InputBOD'+dataItem.Id, dataItem.BillOfLadenDate, dataItem.Id)">select</span></span>
                        </span>
                    </span>
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-5 control-label">Letter of indemnity: </label>
                <div class="col-sm-7">
                    <span class="k-widget k-datetimepicker k-header k-input">
                        <span class="k-picker-wrap k-state-default">
                            <input kendo-date-time-picker type="text" k-ng-model="dataItem.LetterOfIndemnityDate" class="k-input" placeholder="Enter date and time" name="{{'InputLoI'+dataItem.Id}}" 
                                ng-blur="dataItem.LetterOfIndemnityDate=checkOldMatch(str.LoI, dataItem.LetterOfIndemnityDate);
                                reset('InputLoI'+dataItem.Id, dataItem.LetterOfIndemnityDate, dataItem.Id)" tabindex="-1" ng-keydown="changeSelectionOrder($event)"
                                ng-model="str.LoI" ng-init="str.LoI=getDateTimeString(dataItem.LetterOfIndemnityDate)" k-parse-formats="formatsDateTime" k-format="formatDateTime" />
                            <span unselectable="on" class="k-select"><span unselectable="on" class="k-icon k-i-calendar" role="button">select</span><span unselectable="on" class="k-icon k-i-clock" role="button">select</span><span unselectable="on" class="k-icon k-i-close" role="button" ng-click="dataItem.LetterOfIndemnityDate=clearDate();str.LoI=clearDate();reset('InputLoI'+dataItem.Id, dataItem.LetterOfIndemnityDate, dataItem.Id)">select</span></span>
                        </span>
                    </span>
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-5 control-label">Freight invoice sent: </label>
                <div class="col-sm-7">
                    <span class="k-widget k-datetimepicker k-header k-input">
                        <span class="k-picker-wrap k-state-default">
                            <input kendo-date-time-picker type="text" k-ng-model="dataItem.FreightInvoiceDate" class="k-input" placeholder="Enter date and time" name="{{'InputFID'+dataItem.Id}}" 
                                ng-blur="dataItem.FreightInvoiceDate=checkOldMatch(str.FID, dataItem.FreightInvoiceDate); reset('InputFID'+dataItem.Id, dataItem.FreightInvoiceDate, dataItem.Id)" tabindex="100"
                                ng-model="str.FID" ng-init="str.FID=getDateTimeString(dataItem.FreightInvoiceDate)" k-parse-formats="formatsDateTime" k-format="formatDateTime" ng-keydown="changeSelectionOrder($event)" />
                            <span unselectable="on" class="k-select"><span unselectable="on" class="k-icon k-i-calendar" role="button">select</span><span unselectable="on" class="k-icon k-i-clock" role="button">select</span><span unselectable="on" class="k-icon k-i-close" role="button" ng-click="dataItem.FreightInvoiceDate=clearDate();str.FID=clearDate();reset('InputFID'+dataItem.Id, dataItem.FreightInvoiceDate, dataItem.Id)">select</span></span>
                        </span>
                    </span>
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-5 control-label">Last invoice date: </label>
                <label class="control-label">{{getDateString(dataItem.CommissionInvoiceDate)}}</label>
            </div>
        </div>
    </div>
</div>

